<template>
    <el-card shadow="never" class="totalBox">
        <div class="content">
            <div class="title">数据总览</div>
            <el-scrollbar>
                <div class="data">
                    <div v-for="item in content" :key="item.name" class="item">
                        <div class="myname">
                            {{ item.name }}
                            <el-tooltip v-if="item.desc" class="box-item" placement="top">
                                <template #content>
                                    <div class="desc">{{ item.desc }}</div>
                                </template>
                                <el-icon style="margin-left: 4px; color: #fff; background: #969696; border-radius: 50%">
                                    <QuestionFilled />
                                </el-icon>
                            </el-tooltip>
                        </div>
                        <div class="num">{{ numFormat(state[item.key]) }}</div>
                    </div>
                </div>
            </el-scrollbar>
        </div>
    </el-card>
</template>
<script setup lang="tsx">
import { numFormat } from '@/utils/utils';
import { ref, defineExpose, computed, reactive } from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute();
const type = +route.query.source!;
let content = reactive([
    {
        id: 1,
        name: '浏览量',
        key: 'views_count',
        desc: '选定条件下，用户在店铺内浏览页面的次数（按访问时间）目前自营店铺、客易达店铺支持浏览量的统计。',
        notShow: 2
    },
    {
        id: 2,
        name: '访客量',
        key: 'visitors_num',
        desc: '选定条件下，进入店铺浏览页面后的去重用户/客户数（按访问时间）目前自营店铺、客易达店铺支持访客量的统计。',
        notShow: 2
    },
    {
        id: 3,
        name: '应付金额',
        key: 'cope_money',
        desc: '选定条件下，店铺中产生的已成功支付订单，包括优惠减免金额及优惠抵扣金额，客户应支付的金额，包含运费、税费（货到付款以确认收货计入统计）',
        notShow: 1
    },
    {
        id: 4,
        name: '实付金额',
        key: 'pay_money',
        desc: '选定条件下，店铺中产生的已成功支付订单，在扣除优惠减免金额及优惠抵扣金额后，客户实际支付的金额，包含运费、税费（货到付款以确认收货计入统计，自提以后台支付成功后计入统计；统计场景包含商品订单和直接消费订单，支付后取消或产生售后不会扣减）（按支付成功时间）',
        notShow: 1
    },
    {
        id: 5,
        name: '支付单数',
        key: 'pay_count',
        desc: '选定条件下，店铺中产生的已成功支付订单单数（按支付成功时间）',
        notShow: 1
    },
    {
        id: 6,
        name: '支付人数',
        key: 'pay_num',
        desc: '选定条件下，在店铺中已支付订单用户/客户的去重人数（按支付成功时间）（同平台店铺内去重+跨平台店铺关联上客易达的客户去重）',
        notShow: 1
    },
    {
        id: 7,
        name: '客单价',
        key: 'guest_unit_price',
        desc: '选定条件下，店铺已成功支付的订单中，平均每个客户的订单金额（应付金额/支付人数）',
        notShow: 1
    },
    {
        name: '复购人数',
        key: 'repeat_pay_num',
        desc: '选定条件下，在店铺已成功支付订单的客户中，非首次支付的用户/客户去重人数（按支付成功时间）',
        notShow: 1
    },
    // { name: '复购率', key: 'visitor_pay_con_rate', desc: '' },
    { id: 8, name: '复购率', key: 'repeat_pay_rate', desc: '', notShow: 1 },
    {
        id: 9,
        name: '新增绑定客户数',
        key: 'bind_cust_num',
        desc: '选定条件下，在店铺中有浏览、下单、支付等行为的用户中，已关联到客易达客户的人数。（不局限在支付成功用户）',
        notShow: 1
    },
    {
        id: 10,
        name: '新增企微客户数',
        key: 'add_qy_cust_num',
        desc: '选定条件下，在新增绑定客户数中，新增的企微客户数。',
        notShow: 2
    }
]);
const content2 = ref([]);
const state = ref<any>({
    views_count: 0, //浏览量
    visitors_num: 0, //访客
    pay_count: 0, //支付单数
    pay_num: 0, //支付人数
    cope_money: 0, //应付金额
    pay_money: 0, //支付金额
    guest_unit_price: 0, //客单价
    // visitor_pay_con_rate: 0, //访问支付转化率
    repeat_pay_rate: 0, //访问支付转化率
    repeat_pay_num: 0, //复购人数
    bind_cust_num: 0, //绑定客户数
    add_qy_cust_num: 0 //新增企微客户数
});
const fun = (arr: number[]) => {
    const result = content.filter(item => !arr.includes(item.id));
    return result;
};
const filterData = (t: any) => {
    switch (t) {
        case 2:
        case 3:
        case 6:
            content = fun([1, 2, 10]);
            break;
    }
};
filterData(type);
const onQuantity = (v: any, type: any) => {
    state.value = v;
    // if (type == 3) {
    //   content.splice(0, 2)
    // }
};
defineExpose({
    onQuantity
});
</script>
<style scoped lang="scss">
.totalBox {
    margin: 16px 0;
}

.content {
    .title {
        padding-bottom: 17px;
        margin-bottom: 24px;
        border-bottom: 1px solid #eaeaea;
        font-size: 16px;
        font-family: PingFangSC-Medium, 'PingFang SC';
        font-weight: 500;
        color: #585858;
        line-height: 22px;
    }

    .data {
        display: flex;

        // grid-template-columns: repeat(11, 1fr);
        justify-content: space-between;

        // grid-gap: 30px;
        white-space: nowrap; /* 强制不换行 */
        padding-bottom: 16px;

        .item {
            margin-right: 25px;
            text-align: left;

            &:last-child {
                margin-right: 0;
            }

            .myname {
                display: flex;
                align-items: center;
                font-size: 14px;
                font-family: PingFangSC-Regular, 'PingFang SC';
                font-weight: 400;
                color: #666;
                line-height: 20px;
            }

            .num {
                padding-top: 8px;
                font-size: 30px;
                font-family: HelveticaNeue-Medium, HelveticaNeue;
                font-weight: 500;
                color: #33302d;
                line-height: 36px;
            }
        }
    }
}

.desc {
    white-space: normal;
    word-break: break-all;
    word-wrap: break-word;
    width: 412px;
    font-size: 12px;
    font-family: PingFangSC-Regular, 'PingFang SC';
    font-weight: 400;
    line-height: 20px;
}
</style>
